<template>
    <div class="app-container">
        <!-- 查询和其他操作 -->
        <div class="filter-container">
            <el-input v-model="listQuery.name" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入商品ID" />
            <el-input v-model="listQuery.code" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入商品名称" />
            <el-button v-permission="['GET /admin/brand/list']" class="filter-item" type="primary" icon="el-icon-search"
                @click="handleFilter">查找</el-button>
            <el-button v-permission="['POST /admin/brand/create']" class="filter-item" type="primary"
                icon="el-icon-edit" @click="handleCreate">添加</el-button>
            <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="handleDownload">导出</el-button>
        </div>

        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>

            <el-table-column align="center" width="100px" label="品牌商ID" prop="id" />

            <el-table-column align="center" label="品牌商名称" prop="name" />

            <el-table-column align="center" property="picUrl" label="品牌商图片">
                <template slot-scope="scope">
                    <img v-if="scope.row.picUrl" :src="scope.row.picUrl" alt="" width="80">
                </template>
            </el-table-column>

            <el-table-column align="center" min-width="400px" label="介绍" prop="desc">

            </el-table-column>

            <el-table-column align="center" label="低价" prop="floorPrice" />
            <el-table-column align="center" width="200" class-name="small-padding fixed-width" label="操作">
                <template slot-scope="scope">
                    <el-button v-permission="['POST /admin/brand/update']" type="primary" size="mini"
                        @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button v-permission="['POST /admin/brand/delete']" type="danger" size="mini"
                        @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" />


        <!-- 弹出添加修改对话框 -->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left"
                laber-width="100px" style="width:400px;margin-left: 50px;">
                <el-form-item label="品牌商名称" prop="name">
                    <el-input v-model="dataForm.name"></el-input>
                </el-form-item>
                <el-form-item label="介绍" prop="simpleDesc">
                    <el-input v-model="dataForm.desc"></el-input>
                </el-form-item>
                <el-form-item label="品牌商图片" prop="picUrl">
                    <el-upload :headers="headers" :action="uploadPath" :show-file-list="false"
                        :on-success="uploadPicUrl" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif">
                        <img v-if="dataForm.picUrl" :src="dataForm.picUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="底价" prop="floorPrice">
                    <el-input v-model="dataForm.floorPrice"></el-input>
                </el-form-item>
            </el-form>

            <!-- 确定取消按钮 -->
            <div class="dialog-footer" slot="footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button v-if="dialogStatus = 'create'" type="primary" @click="createData">确定</el-button>
                <el-button v-else type="primary" @click="updateData">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { listBrand, createBrand, updateBrand, deleteBrand } from '@/api/brand'
import { uploadPath } from '@/api/storage'
import { getToken } from "@/utils/auth"
import Pagination from '@/components/Pagination'
export default {
    name: 'Brand',
    components: {
        Pagination
    },
    data() {
        return {
            uploadPath,
            list: undefined,
            total: 0,
            listLoading: false,
            listQuery: {
                page: 1,
                limit: 20,
                id: undefined,
                name: undefined,
                sort: 'add_time',
                order: 'desc'
            },
            dataForm: {
                id: undefined,
                name: '',
                desc: '',
                floorPrice: undefined,
                picUrl: undefined
            },
            dialogFormVisible: false,
            dialogStatus: '',
            textMap: {
                update: '编辑',
                create: '创建'
            },
            rules: {
                name: [
                    { require: true, message: '品牌商不能为空', trigger: 'blur' }
                ]
            },

            downloadLoading: false
        }
    },
    computed: {
        headers() {
            return {
                'X-Mymall-Admin-Token': getToken()
            }
        }
    },
    methods: {
        getList() {
            this.listLoading = true
            listBrand(this.listQuery).then(response => {
                this.list = response.data.data.items
                this.total = response.data.data.total
                this.listLoading = false
            }).catch(() => {
                this.list = []
                this.total = 0
                this.listLoading = false
            })
        },
        // 查找
        handleFilter() {
            this.listQuery.page = 1
            this.getList()
        },
        // 导出
        handleDownload() {

        },
        handleCreate() {
            this.restForm()
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        // 重置添加表格
        restForm() {
            this.dataForm = {
                id: undefined,
                name: '',
                desc: '',
                floorPrice: undefined,
                picUrl: undefined
            }
        },
        // 创建新内容
        createData() {
            // 任意表单项被校验后触发
            this.$refs['dataForm'].validate(valid => {
                console.log(valid);
                // 回调参数是被校验的表单项的prop值，验证是否通过，错误消息
                if (valid) {
                    // 创建信息
                    createBrand(this.dataForm).then(response => {
                        this.list.unshift(response.data.data)
                        this.dialogFormVisible = false
                        this.$notify.success({
                            title: '成功',
                            message: '创建成功'
                        })
                    }).catch(response => {
                        this.$notify.error({
                            title: '失败',
                            message: response.data.errmsg
                        })
                    })
                }
            })
        },
        // 更新内容
        handleUpdate(row) {
            this.dataForm = Object.assign({}, row)
            this.dialogStatus = 'update',
                this.dialogFormVisible = true,
                this.$nextTick(() => {
                    // 移除该表单的校验结果
                    this.$refs['dataForm'].clearValidate()
                })
        },
        // 上传图片
        uploadPicUrl(response) {
            this.dataForm.picUrl = response.data.url
        },
        updateData() {
            this.$refs['dataForm'].validate(valid => {
                if (valid) {
                    updateBrand(this.dataForm)
                        .then(() => {
                            for (const v of this.list) {
                                if (v.id === this.dataForm.id) {
                                    const index = this.list.indexOf(v)
                                    this.list.splice(index, 1, this.dataForm)
                                    break
                                }
                            }
                            this.dialogFormVisible = false
                            this.$notify.success({
                                title: '成功',
                                message: '更新成功'
                            })
                        })
                        .catch(response => {
                            this.$notify.error({
                                title: '失败',
                                message: response.data.errmsg
                            })
                        })
                }
            })
        },
        handleDelete(row) {
            deleteBrand(row).then(response => {
                this.$notify.success({
                    title: '成功',
                    message: '删除成功'
                })
                const index = this.list.indexOf(row)
                this.list.splice(index, 1)
            }).catch(response => {
                this.$notify.error({
                    title: '失败',
                    message: response.data.errmsg
                })
            })
        }


    },
    mounted() {
        this.getList()
    },
}
</script>
<style lang="">
    
</style>